<template>
	<view class="content">
		<view class="content_line">
			<view class="content_line_first">
				<view class="content_lt_view"></view>
				<view class="content_rt_view"></view>
			</view>

			<view class="context_view">
				<view
					style="width: 617rpx;height: 125rpx;background-color: #F9F3EB;margin-top: 33rpx;
				display: flex;justify-content: space-between;align-items: center;
				border-radius: 10rpx; box-shadow: 0px 0px 5px rgba(88,88,88,0.35);"
				>
					<view style="display: flex;flex-direction: column;justify-content: center; align-items: center; width: 49%;">
						<text style="font-size: 42rpx;color: #D45151;font-weight: bold;">￥{{ balance }}</text>
						<text style="font-size: 25rpx;color: #656565;">所有余额</text>
					</view>
					<view style="width: 2rpx;height: 70rpx;background-color: #E7DBCB;"></view>
					<view @click="goWithDrawal" style="width: 49%;display: flex;align-items: center;justify-content: center;font-size: 41rpx;color: #D45151;">提现</view>
				</view>

				<view
					style="background-color: #F9F3EB; margin-top: 55rpx;width: 617rpx;flex-grow: 1;
				border-radius: 10rpx; box-shadow: 0px 0px 5px rgba(88,88,88,0.35);margin-bottom: 40rpx;
				display: flex;flex-direction: column;justify-content: center;align-items: center;"
				>
					<scroll-view
						:scroll-top="scrollTop"
						scroll-y="true"
						class="scroll-Y"
						@scrolltoupper="upper"
						@scrolltolower="lower"
						enable-flex="true"
						style="height: 600rpx; display: flex;flex-direction: column; align-items: center;flex-grow: 1;"
					>
						<text style="font-size: 25rpx;color: #656565;align-self: flex-start;margin-left: 33rpx;margin-top: 11rpx;">消费明细</text>
						<view style="width: 550rpx;height: 1rpx;background-color: #E7DBCB;margin-top: 11rpx;"></view>

						<view style="width: 90%;display: flex;flex-direction: column; justify-content: center;align-items: center;" v-for="(item, index) in testList" :key="item">
							<view style="display: flex; width: 100%;height: 80rpx;align-items: center;">
								<image :src="item.orderStyle == 3 ? '../static/money_up.png' : '../static/money_down.png'" mode="aspectFit" style="width: 56rpx; height: 52rpx;"></image>
								<view style="display: flex;flex-direction: column;flex-grow: 1;margin-left: 7rpx;">
									<text style="font-size: 25rpx;color: #656565;">{{ item.orderStyle == 3 ? '余额收入' : (item.orderStyle == 2 ? '提现支出':'购买会员') }}</text>
									<text style="font-size: 21rpx;color: #656565;">{{ item.createTime }}</text>
								</view>
								<text style="font-size: 33rpx;color: #D45151;">{{ item.price }}元</text>
							</view>
							<view style="width: 550rpx;height: 1rpx;background-color: #E7DBCB;margin-top: 11rpx;"></view>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="content_line_last">
				<view class="content_lb_view"></view>
				<view class="content_rb_view"></view>
			</view>
		</view>
	</view>
</template>

<script>
import helper from '../common/helper.js';
export default {
	data() {
		return {
			balance: 0,
			testList: [],
			page: 1,
			itemOrderStyle: 1,
			scrollTop: 0,
			old: {
				scrollTop: 0
			}
		};
	},
	onLoad() {
		console.log(helper.myUserInfo.id);
		Date.prototype.format = function(format) {
		       var date = {
		              "M+": this.getMonth() + 1,
		              "d+": this.getDate(),
		              "h+": this.getHours(),
		              "m+": this.getMinutes(),
		              "s+": this.getSeconds(),
		              "q+": Math.floor((this.getMonth() + 3) / 3),
		              "S+": this.getMilliseconds()
		       };
		       if (/(y+)/i.test(format)) {
		              format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
		       }
		       for (var k in date) {
		              if (new RegExp("(" + k + ")").test(format)) {
		                     format = format.replace(RegExp.$1, RegExp.$1.length == 1
		                            ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
		              }
		       }
		       return format;
		}
		this.getList();
	},
	onShareAppMessage: function(res) {
		console.log("myid=" + helper.myUserInfo.id);
		if (res.from === 'button') {
			// 来自页面内转发按钮
		}
		return {
			title: '来测一测今日财神方位！',
			path: 'pages/homePage?commentUserId=' + helper.myUserInfo.id
		};
	},
	methods: {
		getList() {
			console.log('获取余额');
			//把this存到这里，不然异步请求拿不到，后续用that代替this
			let that = this;
			this.$request
				.post('/api/v1/getBalanceList', {
					data: {
						page: that.page
					},
					dataType: 'json',
					responseType: 'application/json'
				})
				.then(res => {
					console.log(res);
					
					that.balance = res.data.data.balance;

					for (let index in res.data.data.vipList) {
						res.data.data.vipList[index].createTime = new Date(res.data.data.vipList[index].payTime).format('yyyy-MM-dd h:m:s');
					}

					// that.testList = res.data.data;

					// for (let index in that.testList) {
					// 	that.testList[index].createTime = new Date(that.testList[index].payTime).toLocaleString();
					// }

					that.testList.push.apply(that.testList, res.data.data.vipList);
				})
				.catch(error => {
					console.log('error:', error);
				});
		},
		upper: function(e) {
			console.log(e);
		},
		lower: function(e) {
			console.log(e);
			this.page = this.page + 1;
			this.getList();
		},
		goTop: function(e) {
			this.scrollTop = this.old.scrollTop;
			this.$nextTick(function() {
				this.scrollTop = 0;
			});
			uni.showToast({
				icon: 'none',
				title: '纵向滚动 scrollTop 值已被修改为 0'
			});
		},
		goWithDrawal(){
			uni.navigateTo({
				url: './withdrawalPage' + "?blance=" + this.balance
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #e6dcc8;
}

.content_line {
	width: 690rpx;
	height: 95%;
	border-style: solid;
	border-width: 7rpx;
	border-color: #d45151;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.content_line_first {
	display: flex;
	justify-content: space-between;
}

.content_line_last {
	display: flex;
	justify-content: space-between;
}

.content_lt_view {
	width: 17rpx;
	height: 17rpx;
	background: #d45151;
}

.content_rt_view {
	width: 17rpx;
	height: 17rpx;
	background: #d45151;
}

.content_lb_view {
	width: 17rpx;
	height: 17rpx;
	background: #d45151;
	align-self: flex-end;
}

.content_rb_view {
	width: 17rpx;
	height: 17rpx;
	background: #d45151;
	align-self: flex-end;
}

.context_view {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}
</style>
